<script setup lang="ts">
// 行业客群-客群趋势

import {message} from "ant-design-vue";
import {stat} from "fs-extra";
import {getCurrentInstance} from "vue";
import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import {industryCustomerInterception} from "~/utils/interception/sycm/industryCustomerInterception";

const {proxy} = getCurrentInstance();
const $req = proxy.$req;
const state = reactive<any>({
  loginVisible: false,
  visible: false,
  data: [],
  dates: [],
  columns: [],
  tableData: [],
  loading: false,
  chartOptions: {},
});
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit: () => {
      state.loginVisible = true;
    }
  }, __option)) {
    state.visible = true;
    loadData();
  }
}
const loadData = async () => {
  state.loading = true;
  let data = $req.getResponse(industryCustomerInterception[0]);
  if (!data) {
    message.error('数据获取失败，请重试~');
    return;
  }
  state.data = data.data.payRateIndex;
  state.data.map((item: any, index: number) => {
    return state.data[index] = (item * 100).toFixed(2);
  })
  let cateName = document.querySelector("div.ebase-FaCommonFilter-module__root > div > div > div > div > div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__left > div:nth-child(1) > div > a")?.getAttribute('title');
  let dates = await SYCM.getInternalFiberData('#sycm-mc-mq-industry-customer-trend > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div > div > div > div > div > div > svg > g.recharts-layer.recharts-cartesian-axis.recharts-xAxis.xAxis > g', 'memoizedProps.children[0]._owner.memoizedProps.domain')
  if (!dates) {
    message.error('日期数据获取失败，请重试~');
    return;
  }
  state.dates = dates;
  state.columns = [
    {// 分类名称
      title: '分类名称',
      dataIndex: 'cateName',
      key: 'cateName',
      // width: 200,
      // fixed: 'left',
      tooltip: true,
      sorter: (a, b) => a.cateName.localeCompare(b.cateName),
    },
    {// 日期
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      align: 'center',
      defaultSortOrder: 'descend',
      // width: 200,
      // fixed: 'left',
      sorter: (a, b) => a.date.localeCompare(b.date),
    },
    { // 支付转化率
      title: '支付转化率',
      dataIndex: 'payRateIndex',
      key: 'payRateIndex',
      align: 'right',
      dataType: 'customRender',
      sorter: (a, b) => a.payRateIndex - b.payRateIndex,
      render: (text, record, index) => {
        return text + '%'
      }
    }
  ];
  // 计算tableData
  let tableData = [];
  for (let i = 0; i < state.data.length; i++) {
    let item = state.data[i];
    let obj: any = {
      cateName: cateName,
      date: state.dates[i],
      payRateIndex: item,
    };
    tableData.push(obj);
  }
  state.tableData = tableData;
  state.loading = false;
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0"/>
      <a-button @click="handle" type="primary" size="small">一键转化</a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="state.loginVisible"/>
    <custom-modal title="市场-行业客群-客群趋势" v-model:visible="state.visible" style="top: 20px;" width="95%">
      <template #headerRight>
        <s-y-c-m-custom-modal-header-notice/>
      </template>
      <div style="height: calc(100vh - 110px);overflow-y: auto">
        <e-chart :options="{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['支付转化率'],
          bottom: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: state.dates,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '支付转化率',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '支付转化率',
            type: 'line',
            smooth: true,
            data: state.data,
          },
        ]
      }" style="height: 300px"
        />
        <base-table :data-source="state.tableData" :columns="state.columns" size="small" :scroll="{
        y:500
      }" table-name="市场-行业客群-客群趋势" :loading="state.loading"
        >

        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
